<template>
  <div id="region">
    <!-- 弹窗 -->
    <choice2 @formatwdate1="formatwdate1" @formatwdate="formatwdate" show="month" :timing="8">
      <template>
        <fan @onConfirm="onConfirm"></fan>
        <city :radio_values="goodslist" @getCity="getCity" />
      </template>
    </choice2>
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-if="talentList.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && !isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
        style="overflow: hidden;"
      >
        <div
          class="lp_box"
          v-for="(item, i) in talentList"
          :key="i + 't'"
          @click="todatails(item.authorId)"
        >
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_head"><img v-lazy="item.logo" v-errorImg:talent /></div>
            <div class="lp_title">
              <div class="lp_title_item"><span>{{ item.nickName }}</span></div>
              <p class="lp_text">粉丝数：{{ format_num(item.totalFans) }}</p>
            </div>
          </div>
          <div class="lp_footer">
            <div class="lpf_item"><strong>{{ format_num(item.favoriteIncr) }}</strong><span>点赞增量</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.commentIncr) }}</strong><span>评论增量</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.shareIncr) }}</strong><span>转发增量</span></div>
          </div>
        </div>
        <p v-if="!loading_01&&!isQzss" class="nothingWl linHei">
          榜单中没有您想要的结果?
          <span @click="toSearch">全站搜索</span>
          <button class="addInd" @click="goPage">
            <img src="../../assets/three/addIcon.png" alt />
            添加收录
          </button>
        </p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
      </van-list>
    </div>
    <div class="bottom_Collection" v-if="talentList.length == 0 && !loading_01">
      <img class="nodata" src="@/assets/three/noData.png" />
      <p v-if="isNodata && isFilter">暂无数据</p>
      <!-- <p>榜单中没有您想要的结果? <span @click="toSearch">全站搜索</span></p> -->
      <p v-if="!isQzss && !isFilter">
        榜单中没有您想要的结果?
        <span @click="toSearch">全站搜索</span>
        <button class="addInd" @click="goPage">
          <img src="../../assets/three/addIcon.png" alt />
          添加收录
        </button>
      </p>
      <!-- <p v-if="isQzss">我是有底线的~</p> -->
    </div>
  </div>
</template>

<script>
import choice2 from '@/component/choice_2';
import city from '@/component/city';
import fan from '@/component/fans02.vue';
import errorImg from '@/assets/img/superman.png'; //图片
export default {
  name: '',
  components: { choice2, city, fan },
  props: ['valueSerach'],
  data() {
    return {
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      page: 1,
      talentList: [],
      //触底
      finished: false,
      refreshing: false,
      loading: false,
      loading_01: false,
      //
      my_radio01: '总榜',
      my_radio02: '全部',
      input01: '',
      Time: '',
      page01: 1,
      page: 1,
      pageSize: 30, //list个数
      talentList: [],
      RankType: 1, //判断日月周榜单
      goodslist: [], //全部商品
      goodslist1: [],
      CategoryId: 0, // "商品id"
      CategoryId_01: 0, // "商品id"
      tit2: '全部',
      value01: '不限',
      value02: '不限',
      value03: '不限',
      value04: '',
      val1: 0,
      val2: 0,
      val3: 0,
      val4: 0,
      permissions: false,
      //
      value05: '日榜',
      value06: '日榜',
      isQzss: false, // 是否显示 全站搜索的文案
      provinceId: 721879, //默认北京
      cityId: 0,
      errorImg: errorImg,
      isNodata: false,
      isFilter:false,
    };
  },
  computed: {
    listen_change() {
      const {
        my_radio01,
        my_radio02,
        value01,
        value02,
        value03,
        value04,
        value05,
        val1,
        val2,
        val3,
        val4
      } = this;
      return {
        my_radio01,
        my_radio02,
        value01,
        value02,
        value03,
        value04,
        value05,
        val1,
        val2,
        val3,
        val4
      };
    },
    // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.search('');
      }
    },
  },
  mounted() {
    this.getProCategories();
    // this.GetTalentList();
  },

  methods: {
    getCity(cityVal) {
      this.page = 1;
      this.finished = false;
      this.talentList = [];
      this.dataList = [];
      this.CategoryId = 0;
      this.ProFrom = -1;
      (this.provinceId = cityVal.pid),
      (this.cityId = cityVal.cid ? cityVal.cid[0] : 0);
      this.isFilter = (this.provinceId != 721879) || Boolean(this.val3 || this.val4); //判断是否带筛选条件，用来区分展示暂无数据等状态
      this.GetTalentList();
    },
    goPage() {
      let that = this;
      this.$router.push({
        path: '/addIndexed',
        query: { search: that.valueSerach }
      });
    },
    // 跳转搜索页面
    toSearch() {
      this.$router.push({ path: '/searchHistory', query: { value: 0, name: this.valueSerach } });
    },
    //跳转达人详情
    todatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id } });
    },
    search(i) {
      this.key = i;
      this.page01 = 1;
      this.page = 1;
      this.finished = false;
      this.permissions = false;
      this.talentList = [];
      this.isNodata = false;
      this.GetTalentList();
    },
    search1(i) {
      this.key = i;
    },
    // 全部分类
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/category/search'
      })
        .then(res => {
          this.goodslist1 = res.data.data;
          this.goodslist = this.goodslist1.map(item => {
            return item.category_name;
          });
        })
        .catch(error => {
          console.log(error);
        });
    },

    //接口数据
    GetTalentList() {
      let that = this;
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      let pms = {
        listtype: 4,
        // that.value01 == ' ' ? 3 : 4,
        category: this.CategoryId,
        rankType: this.RankType,
        fans: this.val3, //粉丝数
        isshop: this.val4, //是否带货
        date: this.Time,
        key: this.key,
        pagesize: this.pageSize,
        pageindex: that.page,
        provinceId: this.provinceId,
        cityId: this.cityId
      };
      this.$axios
        .post('/fansRankTrade', pms)
        .then(res => {
          this.key ? (this.isQzss = false) : (this.isQzss = true);
          if (res.data.code == 0) {
            // 避免重复赋值
            this.talentList =
              this.page == 1 ? res.data.data.list : this.talentList.concat(res.data.data.list);
            this.loading = false;
            this.loading_01 = false;
            // this.refreshing = false
            // this.finished = false
            if (res.data.data.list.length && res.data.data.list.length < this.pageSize) {
              this.finished = true;
            }
          }
          
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.finished = true;
            this.permissions = true;
            this.loading = false;
            this.loading_01 = false;
          } else if (res.data.code == 1002) {
            this.finished = true;
            this.loading = false;
            this.loading_01 = false;
            this.isNodata = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //当前月默认时间
    //去掉月日
    deltime(time) {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var a = time.replace(/日/g, '-');
      var str = a.replace(/月/g, '-');
      var str1 = str.replace(/--/g, '-' + y + '-');
      var str1 = str1.substring(0, str1.length - 1);
      this.Time = y + '-' + str1;
      this.Time = this.Time.slice(11, 21); //周榜
    },
    month() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth();
      var d = nowdate.getDate();
      var lastDay = new Date(y, m, 0);
      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
      this.Time = newvalue;
      this.Time = this.Time.slice(11, 21);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    formatwdate(i, dateObj) {
      this.page = 1;
      this.isNodata = false;
      this.talentList = [];
      if (i == '日榜') {
        this.RankType = 1;
      } else if (i == '周榜') {
        this.RankType = 2;
      } else if (i == '月榜') {
        this.RankType = 3;
      }
      this.Time = dateObj.value;
      this.GetTalentList();
    },
    formatwdate1(dateObj) {
      this.page = 1;
      this.isNodata = false;
      this.talentList = [];
      this.Time = dateObj.value;
      this.GetTalentList();
    },
    //     作品数，点赞数，粉丝数 ， 带货
    onConfirm(value03, value04) {
      this.page = 1;
      this.finished = false;
      this.talentList = [];
      //粉丝数
      if (value03 == '不限') {
        this.val3 = 0;
      } else if (value03 == '<1万') {
        this.val3 = 1;
      } else if (value03 == '1万-10万') {
        this.val3 = 2;
      } else if (value03 == '10万-50万') {
        this.val3 = 3;
      } else if (value03 == '50万-100万') {
        this.val3 = 4;
      } else if (value03 == '100万-500万') {
        this.val3 = 5;
      } else if (value03 == '500万-1000万') {
        this.val3 = 6;
      } else if (value03 == '>1000万') {
        this.val3 = 7;
      }
      if (value04 == true) {
        this.val4 = 1;
      } else {
        this.val4 = 0;
      }
      this.isFilter = (this.provinceId != 721879) || Boolean(this.val3 || this.val4); //判断是否带筛选条件，用来区分展示暂无数据等状态
      this.GetTalentList();
    },
    //触底
    onLoad() {
      // this.loading = true
      if (this.page * this.pageSize > this.talentList.length) {
        this.loading = false;
        this.finished = false;
      } else if (this.talentList.length) {
        // if (this.page < this.pageSize) {
        //   this.page = this.page + 1;
        //   this.GetTalentList();
        // } else if (this.page == this.pageSize) {
        //   this.finished = true;
        // }
        this.page = this.page + 1;
        this.GetTalentList();
      }
    },
    //上拉刷新
    onRefresh() {
      this.loading = false;
      this.page = 1;
      this.pageIndex = 1;
      this.talentList = [];
      this.finished = false;
      this.isNodata = false;
      this.GetTalentList();
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
#region {
  margin-bottom: 1.62rem;
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    span {
      color: #fd7f2c;
    }
  }
  //   搜索栏
  .bgsearch {
    max-width: 9.2rem;
    margin-left: 0.4rem;
    margin-top: 0.133333rem;
  }
  .input_group {
    position: fixed;
    top: 0;
    z-index: 222;
    width: 100%;
    background: #fff;
    padding-bottom: 0.2rem;
    // padding-top: 0.1rem;
    input {
      width: 8.82rem;
      background: #f1f1f1;
      outline: none;
      border-radius: 0.4rem;
      border: 0;
      font-size: 0.346rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0.346rem;
      letter-spacing: 0px;
      color: #b5b5b5;
      padding: 0.266rem 0 0.266rem 0.4rem;
    }
    .search {
      position: absolute;
      top: 0.6rem;
      right: 0.8rem;
      width: 0.4rem;
      height: 0.4rem;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .box {
    width: 9.2rem;
    background: #fff;
    border-radius: 0.133333rem;
    display: flex;
    margin: 0 auto 0.2rem;
  }
  .left {
    width: 1.68rem;
    position: relative;
    .img {
      width: 1.2rem;
      height: 1.2rem;
      margin-top: 0.266667rem;
      margin-left: 0.253333rem;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
      box-sizing: border-box;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .rank {
      position: absolute;
      top: 0.14rem;
      left: 0.12rem;
      z-index: 1;
      width: 0.62rem;
      height: 0.52rem;
      background: url(../../assets/two/fire.png) no-repeat center;
      background-size: 100% 100% !important;
      p {
        font-size: 0.373333rem;
        text-align: center;
        line-height: 0.56rem;
        color: #666666;
        font-family: DINPro-Medium;
      }
    }
    .rank1 {
      background: #f1f1f1;
      // height: 0.466667rem;
      // line-height: 0.466667rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: 0.14rem;
      left: 0.12rem;
      z-index: 1;
      padding: 0.06rem 0.133333rem 0.03rem;
      p {
        font-size: 0.373333rem;
        line-height: 1;
        text-align: center;
        color: #666666;
        font-family: DINPro-Medium;
      }
    }
  }
  .right {
    width: 7.493rem;
    padding-left: 0.3rem;
    .wid {
      display: flex;
      margin-top: 0.36rem;
      .name {
        max-width: 6rem;
        font-size: 0.373rem;
        color: #222;
        text-align: left;
        line-height: 0.453rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .total {
      display: flex;
      margin-top: 0.266rem;
      div {
        width: 1.893rem;
        span {
          display: block;
          text-align: left;
        }
        span:nth-of-type(1) {
          display: block;
          font-size: 0.373333rem;
          line-height: 0.373333rem;
          color: #222;
          font-family: Dinpro-medium;
        }
        span:nth-of-type(2) {
          display: block;
          font-size: 0.293333rem;
          color: #888;
          line-height: 0.293333rem;
          padding: 0.2rem 0 0.24rem 0;
        }
      }
      div:nth-of-type(4) {
        width: 1.7333rem;
      }
    }
  }
  .bot > {
    display: flex;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f4f9ff;
    border-radius: 0.44rem;
    border: solid 0.02rem #1779ff;
    margin: 0 auto;
    margin-bottom: 1.506667rem;

    p {
      margin-left: 0.6rem;
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #222222;
    }
    a {
      font-size: 0.346667rem;
      color: #1779ff;
    }
  }
  .bottom_Collection {
    //暂无数据
    .nodata {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }
  .addInd {
    width: 2.346667rem;
    height: 0.8rem;
    background-color: #fd7f2c;
    border-radius: 0.133333rem;
    font-size: 0.346667rem;
    color: #ffffff;
    line-height: 0.8rem;
    display: flex;
    justify-content: center;
    border: none;
    margin: auto;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    img {
      margin-right: 0.133333rem;
      align-self: center;
      width: 0.32rem;
      height: 0.32rem;
    }
  }
  .linHei {
    line-height: 0 !important;
    padding-top: 0.933333rem;
  }
}
</style>